<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main1" class="left"></div>
    <div id="main2" class="right"></div>
    </el-card>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data() {
    return {
      name: [],
      number: [],
      date: [],
      price: []
    }
  },
  created() {
    this.fetch()
  },
  mounted() {
  },
  methods: {
    async fetch() {
      const { data: res } = await this.$http.get('/dingdancount')
      if (res.meta.status !== 200) {
        return this.$message.error('获取订单列表数据失败！')
      }
      const arr = []
      const arr2 = []
      for (const i in res.dingdanxx) {
        if (res.dingdanxx[i].caipinxx != null) {
          const caipin = JSON.parse(res.dingdanxx[i].caipinxx)
          for (const j in caipin) {
            if (arr.indexOf(caipin[j].cp_name) === -1) {
              arr.push(caipin[j].cp_name)
              arr2.push(caipin[j].num)
            } else {
              const k = arr.indexOf(caipin[j].cp_name)
              arr2[k] += caipin[j].num
            }
          }
        }
      }
      const arr3 = []
      const arr4 = []
      const dateprice = []
      for (const i in res.dingdanxx) {
        if (res.dingdanxx[i].price != null) {
          const date = Date.parse(res.dingdanxx[i].date)
          const oldTime = new Date(date)
          var time = oldTime.toLocaleDateString().split('/').join('-')
          dateprice[i] = time
          if (arr3.indexOf(dateprice[i]) === -1) {
            arr3.push(dateprice[i])
            arr4.push(res.dingdanxx[i].price)
          } else {
            const k = arr3.indexOf(dateprice[i])
            arr4[k] += res.dingdanxx[i].price
          }
        }
      }
      this.name = JSON.stringify(arr)
      this.number = JSON.stringify(arr2)
      this.date = JSON.stringify(arr3)
      this.price = JSON.stringify(arr4)
      this.name = JSON.parse(this.name)
      this.number = JSON.parse(this.number)
      this.date = JSON.parse(this.date)
      this.price = JSON.parse(this.price)
      this.biaogeInit()
      this.biaogeInit2()
    },
    biaogeInit() {
      var myChart = echarts.init(document.getElementById('main1'))
      var option = {
        title: {
          text: '菜品累计销售量（单位：份）'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: [{
          type: 'category',
          data: this.name,
          axisTick: {
            alignWithLabel: true
          },
          axisLabel: {
            interval: 0,
            rotate: 45 // 代表逆时针旋转45度
          }
        }],
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: this.number
        }]
      }
      myChart.setOption(option)
    },
    biaogeInit2() {
      var myChart = echarts.init(document.getElementById('main2'))
      var option = {
        title: {
          text: '店铺销售额统计（单位：元）'
        },
        tooltip: {},
        legend: {
          data: ['销售额']
        },
        xAxis: [
          {
            type: 'category',
            data: this.date
          }
        ],
        yAxis: {},
        series: [{
          name: '销售额',
          type: 'bar',
          data: this.price
        }]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped>
.left {
  float: left;
  width: 900px;
  height:500px;
}

.right {
  float: right;
  width: 700px;
  height:500px;
}

</style>
